<template>
    <view class="container">
        <view class="price-box">
            <text>支付金额</text>
            <text class="price">29.58</text>
        </view>

        <!-- 支付方式 -->
        <view class="pay-type-list">
            <radio-group>
                <view class="type-item b-b" @click="changePayType(1)">
                    <text class="icon yticon icon-weixinzhifu"></text>
                    <view class="con">
                        <text class="tit">微信支付</text>
                        <text>推荐使用微信支付</text>
                    </view>
                    <label class="radio">
                        <radio value="" color="#fa436a" :checked="payType == 1" />
                    </label>
                </view>
                <view class="type-item b-b" @click="changePayType(2)">
                    <text class="icon yticon icon-alipay"></text>
                    <view class="con">
                        <text class="tit">支付宝支付</text>
                    </view>
                    <label class="radio">
                        <radio value="" color="#fa436a" :checked="payType == 2" />
                    </label>
                </view>
            </radio-group>
        </view>

        <text class="mix-btn" @click="confirm">确认支付</text>
    </view>
</template>

<script setup>
const payType = ref(1);

const changePayType = (type) => {
    payType.value = type;
};
const confirm = async () => {
    uni.redirectTo({
        url: '/pages/pay/paySuccess'
    });
};
</script>

<style lang="scss" scoped>
.container {
    width: 750rpx;
}
.price-box {
    background-color: #fff;
    height: 265rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #909399;
    .price {
        font-size: 50rpx;
        color: #303133;
        margin-top: 10rpx;
        &::before {
            content: '￥';
            font-size: 40rpx;
        }
    }
}
.pay-type-list {
    margin-top: 20rpx;
    background-color: #fff;
    padding-left: 60rpx;
    .type-item {
        height: 120rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 60rpx;
        font-size: 30rpx;
        position: relative;
    }
    .icon {
        width: 100upx;
        font-size: 52upx;
    }
    .icon-weixinzhifu {
        color: #36cb59;
    }
    .icon-alipay {
        color: #01aaef;
    }
    .tit {
        font-size: $font-lg;
        color: $font-color-dark;
        margin-bottom: 4rpx;
    }
    .con {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: $list-font-sm;
        color: $font-color-light;
    }
}
.mix-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 630rpx;
    height: 80rpx;
    margin: 80rpx auto 30rpx;
    font-size: $font-lg;
    color: #fff;
    background-color: $base-color;
    border: radius 10rpx;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
